<script>
import countTo from 'vue-count-to';
import { mapState } from 'vuex';

export default {
  name: 'ParkData',
  methods: {
    /*获取基础信息的回调函数*/
    fetchDashboardInfo() {
      try {
        this.$store.dispatch('dashboardStore/fetchDashboardInfoAction');
      } catch (error) {
        this.$message.error(error.message);
      }
    },
  },
  mounted() {
    this.fetchDashboardInfo();
  },
  computed: {
    ...mapState('dashboardStore', ['info']),
  },
  components: {
    countTo,
  },
};
</script>

<template>
  <div class="park-data-container">
    <div class="header">园区数据</div>
    <ul>
      <li>
        <span class="text">年度累计收费（元）</span>
        <span class="count">
          <count-to :startVal='0' :endVal='info.annualIncome' :duration='1000'></count-to>
        </span>
      </li>
      <li>
        <span class="text">入驻企业总数（个）</span>
        <span class="count">
        <count-to :startVal='0' :endVal='info.enterpriseTotal' :duration='1000'></count-to>
        </span>
      </li>
      <li>
        <span class="text">月卡车辆总数（辆）</span>
        <span class="count">
        <count-to :startVal='0' :endVal='info.monthCardTotal' :duration='1000'></count-to>
        </span>
      </li>
      <li>
        <span class="text">一体杆总数（台）</span>
        <span class="count">
        <count-to :startVal='0' :endVal='info.chargePoleTotal' :duration='1000'></count-to>
        </span>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.park-data-container {
  background-color: #fff;
  padding: 20px;

  ul {
    list-style: none;
    display: flex;
    margin-top: 10px;

    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      span {
        margin: 12px 0;
      }

      .text {
        display: block;
        width: 100%;
        color: #909399;
        font-size: 13px;
      }

      .count {
        display: block;
        width: 100%;
        font-size: 25px;
      }
    }
  }
}
</style>
